<template>
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <header class="dashboard-header">
      <div class="header-left">
        <h1 class="dashboard-title">贵州公路建设项目管理驾驶舱</h1>
        <div class="project-subtitle">S204三都县坝街至扬拱公路改造工程</div>
      </div>
      <div class="header-right">
        <div class="system-info">
          <span class="info-item">施工单位：北京市市政一建设工程有限责任公司</span>
          <span class="info-item">监理单位：贵州省交通建设咨询监理有限公司</span>
        </div>
        <router-link to="/home" class="nav-link">返回首页</router-link>
        <div class="time-display">{{ currentTime }}</div>
      </div>
    </header>

    <!-- 数据概览卡片区域 -->
    <div class="overview-cards">
      <div class="card">
        <div class="card-icon card-blue">📊</div>
        <div class="card-content">
          <div class="card-title">工程总数</div>
          <div class="card-value">{{ projectData.length }}</div>
          <div class="card-desc">个在建工程</div>
        </div>
      </div>
      <div class="card">
        <div class="card-icon card-green">⏱️</div>
        <div class="card-content">
          <div class="card-title">总工期</div>
          <div class="card-value">{{ totalDuration }}</div>
          <div class="card-desc">天</div>
        </div>
      </div>
      <div class="card">
        <div class="card-icon card-yellow">📈</div>
        <div class="card-content">
          <div class="card-title">平均工期</div>
          <div class="card-value">{{ avgDuration }}</div>
          <div class="card-desc">天/工程</div>
        </div>
      </div>
      <div class="card">
        <div class="card-icon card-red">🎯</div>
        <div class="card-content">
          <div class="card-title">最长工期</div>
          <div class="card-value">{{ maxDuration }}</div>
          <div class="card-desc">天</div>
        </div>
      </div>
    </div>

    <!-- 主要图表区域 -->
    <div class="charts-grid">
      <!-- 甘特图区域 -->
      <div class="chart-panel panel-large">
        <div class="panel-header">
          <h2>工程进度甘特图</h2>
          <div class="panel-actions">
            <button @click="toggleFullscreen('gantt')" class="action-btn">🔄</button>
          </div>
        </div>
        <div class="panel-content">
          <!-- 甘特图时间轴 -->
          <div class="timeline-container">
            <div class="task-label-header"></div>
            <div class="timeline-content">
              <div class="year-section year-2025">
                <div class="year-title">2025</div>
                <div class="months-container">
                  <div class="month">7月</div>
                  <div class="month">8月</div>
                  <div class="month">9月</div>
                  <div class="month">10月</div>
                  <div class="month">11月</div>
                  <div class="month">12月</div>
                </div>
              </div>
              <div class="year-section year-2026">
                <div class="year-title">2026</div>
                <div class="months-container">
                  <div class="month">1月</div>
                  <div class="month">2月</div>
                  <div class="month">3月</div>
                  <div class="month">4月</div>
                  <div class="month">5月</div>
                  <div class="month">6月</div>
                  <div class="month">7月</div>
                  <div class="month">8月</div>
                  <div class="month">9月</div>
                  <div class="month">10月</div>
                  <div class="month">11月</div>
                  <div class="month">12月</div>
                </div>
              </div>
              <div class="year-section year-2027">
                <div class="year-title">2027</div>
                <div class="months-container">
                  <div class="month">1月</div>
                  <div class="month">2月</div>
                  <div class="month">3月</div>
                  <div class="month">4月</div>
                  <div class="month">5月</div>
                  <div class="month">6月</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 甘特图进度条 -->
          <div class="gantt-bars">
            <div v-for="project in projectData" :key="project.id" class="gantt-bar">
              <div class="bar-label">{{ project.name }}</div>
              <div class="bar-container">
                <div 
                  :class="['bar', `bar-${project.id}`]" 
                  :style="{ left: calculateLeft(project.startDate) + '%', width: calculateWidth(project.startDate, project.endDate) + '%' }"
                  :data-project-id="project.id"
                >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3D工期对比图 -->
      <div class="chart-panel panel-large">
        <div class="panel-header">
          <h2>工程工期对比 (3D效果图)</h2>
          <div class="panel-actions">
            <button @click="toggleFullscreen('bar')" class="action-btn">🔄</button>
          </div>
        </div>
        <div class="panel-content dark-bg">
          <div class="chart-wrapper">
            <canvas id="dashboard-bar-chart" ref="barChartCanvas"></canvas>
          </div>
        </div>
      </div>

      <!-- 工程分配环形图 -->
      <div class="chart-panel panel-medium">
        <div class="panel-header">
          <h2>工程工期占比分析</h2>
          <div class="panel-actions">
            <button @click="toggleFullscreen('pie')" class="action-btn">🔄</button>
          </div>
        </div>
        <div class="panel-content">
          <canvas id="dashboard-pie-chart" ref="pieChartCanvas"></canvas>
        </div>
      </div>

      <!-- 工程列表表格 -->
      <div class="chart-panel panel-medium">
        <div class="panel-header">
          <h2>工程详细信息</h2>
          <div class="panel-actions">
            <button @click="toggleTableDisplay" class="action-btn">
              {{ showTable ? '隐藏' : '显示' }}
            </button>
          </div>
        </div>
        <div class="panel-content" v-if="showTable">
          <div class="table-wrapper">
            <table class="dashboard-table">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>工程名称</th>
                  <th>工期(天)</th>
                  <th>占比</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="project in projectData" :key="project.id">
                  <td>{{ project.id }}</td>
                  <td>{{ project.name }}</td>
                  <td>{{ project.duration }}</td>
                  <td>{{ calculateProjectPercentage(project) }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部状态栏 -->
    <footer class="dashboard-footer">
      <div class="footer-left">项目进度实时监控系统 v1.0</div>
      <div class="footer-center">
        <router-link to="/home" class="nav-link">首页</router-link>
        <span class="nav-separator">|</span>
        <router-link to="/dashboard" class="nav-link active">驾驶舱</router-link>
      </div>
      <div class="footer-right">数据更新时间：{{ updateTime }}</div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Chart from 'chart.js/auto';

// 项目数据（与原甘特图保持一致）
const initialProjectData = [
  { id: 1, name: "施工准备", startDate: "2025-07-01", endDate: "2025-07-15", duration: 15 },
  { id: 2, name: "临时工程", startDate: "2025-07-10", endDate: "2025-07-25", duration: 16 },
  { id: 3, name: "清表清淤", startDate: "2025-07-15", endDate: "2025-07-30", duration: 16 },
  { id: 4, name: "路基土石方工程", startDate: "2025-07-20", endDate: "2026-06-24", duration: 340 },
  { id: 5, name: "防护支挡工程", startDate: "2025-07-25", endDate: "2026-07-09", duration: 350 },
  { id: 6, name: "排水工程", startDate: "2025-07-25", endDate: "2026-07-04", duration: 345 },
  { id: 7, name: "涵洞工程", startDate: "2025-10-15", endDate: "2026-07-11", duration: 270 },
  { id: 8, name: "混凝土路肩加固", startDate: "2025-10-15", endDate: "2026-07-06", duration: 265 },
  { id: 9, name: "级配碎石底基层", startDate: "2026-07-15", endDate: "2026-08-11", duration: 28 },
  { id: 10, name: "水泥稳定碎石基层", startDate: "2026-08-20", endDate: "2026-09-18", duration: 30 },
  { id: 11, name: "沥青面层", startDate: "2026-09-28", endDate: "2026-10-27", duration: 30 },
  { id: 12, name: "交安工程", startDate: "2026-11-05", endDate: "2026-12-04", duration: 30 },
  { id: 13, name: "绿化工程", startDate: "2027-03-05", endDate: "2027-03-24", duration: 20 }
];

const projectData = ref([...initialProjectData]);
const showTable = ref(true);
const currentTime = ref('');
const updateTime = ref('');
let barChart = null;
let pieChart = null;
let timeInterval = null;

// 计算属性
const totalDuration = computed(() => {
  return projectData.value.reduce((sum, project) => sum + project.duration, 0);
});

const avgDuration = computed(() => {
  if (projectData.value.length === 0) return 0;
  return Math.round(totalDuration.value / projectData.value.length);
});

const maxDuration = computed(() => {
  if (projectData.value.length === 0) return 0;
  return Math.max(...projectData.value.map(project => project.duration));
});

// 计算甘特图相关
const calculateLeft = (date) => {
  const start = new Date(date);
  const minDate = new Date("2025-07-01");
  const maxDate = new Date("2027-06-30");
  const totalDays = (maxDate - minDate) / (1000 * 60 * 60 * 24);
  const daysFromStart = (start - minDate) / (1000 * 60 * 60 * 24);
  return (daysFromStart / totalDays) * 100;
};

const calculateWidth = (startDate, endDate) => {
  const start = new Date(startDate);
  const end = new Date(endDate);
  const minDate = new Date("2025-07-01");
  const maxDate = new Date("2027-06-30");
  const totalDays = (maxDate - minDate) / (1000 * 60 * 60 * 24);
  const durationDays = (end - start) / (1000 * 60 * 60 * 24) + 1;
  return (durationDays / totalDays) * 100;
};

// 计算项目占比
const calculateProjectPercentage = (project) => {
  if (totalDuration.value === 0) return '0.0';
  return ((project.duration / totalDuration.value) * 100).toFixed(1);
};

// 格式化时间
const formatTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 切换表格显示
const toggleTableDisplay = () => {
  showTable.value = !showTable.value;
};

// 切换全屏显示
const toggleFullscreen = (type) => {
  const element = type === 'gantt' ? document.querySelector('.panel-large:first-child') :
                 type === 'bar' ? document.querySelector('.panel-large:last-child') :
                 document.querySelector('.panel-medium:first-child');
  
  if (!element) return;
  
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(err => {
      console.error(`全屏请求失败: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
};

// 获取项目颜色
const getProjectColor = (projectId) => {
  const colors = {
    1: '#2196F3', 2: '#FF9800', 3: '#9C27B0', 4: '#F44336',
    5: '#607D8B', 6: '#795548', 7: '#009688', 8: '#CDDC39',
    9: '#FF5722', 10: '#673AB7', 11: '#00BCD4', 12: '#8BC34A', 13: '#E91E63'
  };
  return colors[projectId] || '#2196F3';
};

// 调整颜色亮度
const adjustBrightness = (color, amount) => {
  // 简化的颜色亮度调整
  const hex = color.replace('#', '');
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  
  const newR = Math.max(0, Math.min(255, r + amount));
  const newG = Math.max(0, Math.min(255, g + amount));
  const newB = Math.max(0, Math.min(255, b + amount));
  
  return `rgb(${newR}, ${newG}, ${newB})`;
};

// 绘制3D柱状图
const draw3DBarChart = async () => {
  await nextTick();
  const canvas = document.getElementById('dashboard-bar-chart');
  if (!canvas) return;
  
  if (barChart) {
    barChart.destroy();
  }
  
  const ctx = canvas.getContext('2d');
  const width = canvas.offsetWidth;
  const height = canvas.offsetHeight;
  
  canvas.width = width;
  canvas.height = height;
  
  barChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: projectData.value.map(project => {
        if (project.name.length > 8) {
          return project.name.substring(0, 8) + '...';
        }
        return project.name;
      }),
      datasets: [{
        label: '计划工期(天)',
        data: projectData.value.map(project => project.duration),
        backgroundColor: projectData.value.map(project => getProjectColor(project.id)),
        borderColor: '#ffffff',
        borderWidth: 1,
        borderRadius: {
          topLeft: 6,
          topRight: 6
        },
        barPercentage: 0.6,
        categoryPercentage: 0.7
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
          titleColor: '#ffffff',
          bodyColor: '#ffffff',
          borderColor: '#555',
          borderWidth: 1,
          padding: 15,
          callbacks: {
            title: function(context) {
              const index = context[0].dataIndex;
              return projectData.value[index].name;
            },
            label: function(context) {
              const index = context.dataIndex;
              return `计划工期: ${context.parsed.y} 天`;
            }
          }
        }
      },
      scales: {
        x: {
          grid: {
            display: false
          },
          ticks: {
            color: '#ffffff',
            font: {
              size: 12,
              weight: 'bold'
            },
            maxRotation: 45,
            minRotation: 45
          }
        },
        y: {
          beginAtZero: true,
          grid: {
            color: 'rgba(255, 255, 255, 0.1)'
          },
          ticks: {
            color: '#ffffff',
            font: {
              size: 12,
              weight: 'bold'
            },
            callback: function(value) {
              return value + ' 天';
            }
          }
        }
      },
      animation: {
        duration: 1500,
        easing: 'easeOutQuart',
        onComplete: function() {
          const chart = this;
          const ctx = chart.ctx;
          const meta = chart.getDatasetMeta(0);
          
          meta.data.forEach((bar, index) => {
            const x = bar.x - bar.width / 2;
            const y = bar.y;
            const barWidth = bar.width;
            const barHeight = chart.chartArea.bottom - bar.y;
            
            const depth = 15;
            const angle = Math.PI / 6;
            const depthX = Math.cos(angle) * depth;
            const depthY = Math.sin(angle) * depth;
            
            ctx.save();
            
            // 绘制右侧面
            ctx.beginPath();
            ctx.moveTo(x + barWidth, y);
            ctx.lineTo(x + barWidth + depthX, y - depthY);
            ctx.lineTo(x + barWidth + depthX, y + barHeight - depthY);
            ctx.lineTo(x + barWidth, y + barHeight);
            ctx.closePath();
            
            const baseColor = getProjectColor(projectData.value[index].id);
            ctx.fillStyle = adjustBrightness(baseColor, -20);
            ctx.fill();
            
            // 绘制顶面
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + barWidth, y);
            ctx.lineTo(x + barWidth + depthX, y - depthY);
            ctx.lineTo(x + depthX, y - depthY);
            ctx.closePath();
            
            ctx.fillStyle = adjustBrightness(baseColor, 20);
            ctx.fill();
            
            ctx.restore();
          });
        }
      }
    }
  });
};

// 绘制饼图
const drawPieChart = async () => {
  await nextTick();
  const canvas = document.getElementById('dashboard-pie-chart');
  if (!canvas) return;
  
  if (pieChart) {
    pieChart.destroy();
  }
  
  const ctx = canvas.getContext('2d');
  
  pieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: projectData.value.map(project => {
        if (project.name.length > 10) {
          return project.name.substring(0, 10) + '...';
        }
        return project.name;
      }),
      datasets: [{
        data: projectData.value.map(project => project.duration),
        backgroundColor: projectData.value.map(project => getProjectColor(project.id)),
        borderColor: '#1a1a2e',
        borderWidth: 2
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'right',
          labels: {
            color: '#ffffff',
            font: {
              size: 11
            },
            padding: 15
          }
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
          titleColor: '#ffffff',
          bodyColor: '#ffffff',
          borderColor: '#555',
          borderWidth: 1,
          padding: 12,
          callbacks: {
            title: function(context) {
              const index = context[0].dataIndex;
              return projectData.value[index].name;
            },
            label: function(context) {
              const value = context.parsed;
              const total = context.dataset.data.reduce((a, b) => a + b, 0);
              const percentage = ((value / total) * 100).toFixed(1);
              return [`工期: ${value} 天`, `占比: ${percentage}%`];
            }
          }
        }
      },
      cutout: '65%',
      animation: {
        animateScale: true,
        animateRotate: true
      }
    }
  });
};

// 处理窗口大小变化
const handleResize = () => {
  if (barChart) {
    barChart.resize();
  }
  if (pieChart) {
    pieChart.resize();
  }
};

// 更新时间
const updateClock = () => {
  currentTime.value = formatTime(new Date());
};

onMounted(() => {
  updateClock();
  updateTime.value = currentTime.value;
  timeInterval = setInterval(updateClock, 1000);
  
  // 绘制图表
  nextTick(() => {
    draw3DBarChart();
    drawPieChart();
  });
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
  
  if (barChart) {
    barChart.destroy();
  }
  
  if (pieChart) {
    pieChart.destroy();
  }
  
  window.removeEventListener('resize', handleResize);
});

// 监听数据变化
watch(() => projectData.value, () => {
  nextTick(() => {
    draw3DBarChart();
    drawPieChart();
  });
}, { deep: true });
</script>

<style scoped>
/* 驾驶舱容器 */
.dashboard-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部标题栏 */
.dashboard-header {
  padding: 1rem 2rem;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
}

.header-left {
  flex: 1;
}

.dashboard-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
  background: linear-gradient(45deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.project-subtitle {
  font-size: 1.1rem;
  color: #94a3b8;
  margin: 0;
}

.header-right {
  text-align: right;
}

.system-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.info-item {
  font-size: 0.9rem;
  color: #cbd5e1;
}

.time-display {
  font-size: 1.2rem;
  font-weight: bold;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* 数据概览卡片 */
.overview-cards {
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.card {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.card-blue {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0.1));
  color: #38bdf8;
}

.card-green {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.1));
  color: #4ade80;
}

.card-yellow {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(250, 204, 21, 0.1));
  color: #facc15;
}

.card-red {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.2), rgba(248, 113, 113, 0.1));
  color: #f87171;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 0 0 0.25rem 0;
}

.card-value {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
}

.card-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 0;
}

/* 图表网格布局 */
.charts-grid {
  flex: 1;
  padding: 0 2rem 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  overflow: hidden;
}

.chart-panel {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.panel-large {
  grid-column: span 1;
  grid-row: span 1;
}

.panel-medium {
  grid-column: span 1;
  grid-row: span 1;
}

/* 面板头部 */
.panel-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h2 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  color: #e2e8f0;
}

.panel-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 面板内容 */
.panel-content {
  flex: 1;
  padding: 1rem;
  position: relative;
  overflow: auto;
}

.panel-content.dark-bg {
  background: #0a1929;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 甘特图样式 */
.timeline-container {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.5);
}

.task-label-header {
  width: 160px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.8);
}

.timeline-content {
  display: flex;
  flex: 1;
}

.year-section {
  display: flex;
  flex-direction: column;
}

.year-2025 {
  width: calc(6/24 * 100%);
}

.year-2026 {
  width: calc(12/24 * 100%);
}

.year-2027 {
  width: calc(6/24 * 100%);
}

.year-title {
  text-align: center;
  font-weight: bold;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
}

.months-container {
  display: flex;
  height: 40px;
}

.month {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
  background: rgba(15, 23, 42, 0.5);
  color: #cbd5e1;
}

.year-section:not(:last-child) {
  border-right: 2px solid rgba(255, 255, 255, 0.1);
}

.month:last-child {
  border-right: none;
}

.gantt-bars {
  margin-top: 1rem;
}

.gantt-bar {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.bar-label {
  width: 150px;
  padding-right: 10px;
  text-align: right;
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-container {
  flex: 1;
  height: 20px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.bar {
  height: 100%;
  position: absolute;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 为每个工程设置不同的背景色 */
.bar-1 { background-color: #2196F3; }
.bar-2 { background-color: #FF9800; }
.bar-3 { background-color: #9C27B0; }
.bar-4 { background-color: #F44336; }
.bar-5 { background-color: #607D8B; }
.bar-6 { background-color: #795548; }
.bar-7 { background-color: #009688; }
.bar-8 { background-color: #CDDC39; }
.bar-9 { background-color: #FF5722; }
.bar-10 { background-color: #673AB7; }
.bar-11 { background-color: #00BCD4; }
.bar-12 { background-color: #8BC34A; }
.bar-13 { background-color: #E91E63; }

.bar:hover {
  transform: scaleY(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 表格样式 */
.table-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  color: #e2e8f0;
}

.dashboard-table th {
  background: rgba(30, 41, 59, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dashboard-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}

.dashboard-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* 底部状态栏 */
.dashboard-footer {
  padding: 1rem 2rem;
  background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
}

.footer-left,
.footer-right {
  font-size: 0.9rem;
  color: #94a3b8;
}

.footer-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-link {
  color: #94a3b8;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.nav-link:hover {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.nav-link.active {
  color: #38bdf8;
  font-weight: bold;
  background: rgba(56, 189, 248, 0.2);
}

.nav-separator {
  color: #475569;
}

/* 顶部导航链接样式 */
.header-right .nav-link {
  margin-right: 1rem;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  
  .panel-large,
  .panel-medium {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .header-right {
    text-align: center;
  }
  
  .overview-cards {
    grid-template-columns: 1fr;
  }
  
  .dashboard-title {
    font-size: 1.5rem;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.card-value {
  animation: pulse 3s infinite;
}

/* 全屏模式样式 */
:fullscreen .chart-panel,
:-webkit-full-screen .chart-panel,
:-moz-full-screen .chart-panel {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}
</style>